<template>
  <div class="feng">
    <div class="head">
      <div class="head_1" @click="fanhui_btu()">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="head_2" @click="tiaozhuan_btu()">
        <i class="el-icon-more"></i>
      </div>
    </div>
    <div class="head1"></div>
    <div class="shangpin_img">
      <el-image
        style="width: 100%; height: 280px"
        :src="this.list1.img"
        :fit="fit"
      >
        <div slot="error" class="image-slot" style="text-align: center">
          <i class="el-icon-loading"></i>
        </div>
      </el-image>
    </div>
    <div class="jiage">
      <div class="jiage1">
        <span style="margin-left: 10px">{{ this.list1.money }}</span>
      </div>
      <div class="jiage2">
        <span style="margin-left: 10px">{{ this.list1.name }}</span>
      </div>
      <div class="jiage3" @click="drawer1 = true" type="primary">
        <el-drawer
          title="服务和保障"
          :visible.sync="drawer1"
          :direction="direction"
          :before-close="handleClose1"
          size="380px"
        >
          <div>
            <el-image
              style="width: 389px; height: 500px"
              :src="url2"
              :fit="fit"
            >
            </el-image>
          </div>
        </el-drawer>
        <span
          style="margin-left: 10px"
          v-for="(item, index) in list.list1"
          :key="index"
        >
          <i class="el-icon-circle-check" style="color: red"></i>
          <span style="color: rgb(136, 127, 127); font-weight: bold">{{
            item
          }}</span>
        </span>
        <i class="el-icon-more" style="color: red; margin-left: 20px"></i>
      </div>
    </div>
    <div class="shuoming" @click="drawer = true" type="primary">
      <el-drawer
        title="说明书"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        size="500px"
      >
        <div class="shuoming1">
          <el-image
            style="width: 389px; height: 1200px"
            :src="this.list1.shuoming"
            :fit="fit"
          ></el-image>
        </div>
      </el-drawer>
      <span style="margin-left: 10px">药品说明!</span>
      <span style="right: 30px; position: absolute"
        ><i class="el-icon-more"></i
      ></span>
    </div>
    <div class="pinjia"></div>
    <div class="shangpinjieshao">
      <div class="shangpinjieshao1">商品介绍</div>
      <el-image
        style="width: 389px; height: 3820px"
        :src="this.list1.jieshao"
        :fit="fit"
      >
        <div slot="error" class="image-slot" style="text-align: center">
          <i class="el-icon-loading"></i>
        </div>
      </el-image>
    </div>
    <div class="dibianlan">
      <div class="dibianlan1">
        <div style="font-size: 28px; text-align: center">
          <i class="el-icon-star-on"></i>
        </div>
        <div style="font-size: 6px; text-align: center">收藏</div>
      </div>
      <div class="dibianlan2" @click="tiaozhuan_btu">
        <div style="font-size: 28px; text-align: center">
          <i class="el-icon-shopping-cart-1"></i>
        </div>
        <div style="font-size: 6px; text-align: center">购物车</div>
      </div>
      <div class="dibianlan3" @click="jrqd_btu">
        <el-button
    plain
    @click="open" style=" color: white;
  font-size: 20px;
  background-color: orange;border:none;">
    加入清单
  </el-button>
        </div>
      <div class="dibianlan4">立即提交</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "shangpin",
  data() {
    return {
      fit: "cover",
      url2: require("../assets/品质保障.jpg"),
      list: {
        list1: ["正品保障", "药监认证", "满88包邮", "假一赔十"],
      },
      drawer: false,
      drawer1: false,
      direction: "btt",
      list1: [],
    };
  },
  methods: {
    fanhui_btu() {
      this.$router.go(-1);
    },
    tiaozhuan_btu(){
       this.$router.push( "/shopping")
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
       open() {
        this.$notify({
        
          message: '加入成功',
          type: 'success'
        })
       },
    jrqd_btu(){
      console.log(111)
       console.log(this.list1.id)
      this.axios({
        method: "post",
        url: "http://localhost:3000/gouwuche",
        data: {
          id: this.list1.id,
          name: this.list1.name,
          img: this.list1.img,
          gongsi: this.list1.gongsi,
           money: this.list1.money,
           number:this.list1.number
        },
      })
      .then((res)=>{
          console.log(res);
      })
      .catch((error) => {
        console.log(error);
      })

      //  console.log(222)
      //  console.log(this.list1.id)
      // this.axios({
      //   method: "post",
      //   url: "http://localhost:3000/gouwuche",
      //   data: {
      //     id: this.list1.id,
      //     name: this.list1.name,
      //     img: this.list1.img,
      //     gongsi: this.list1.gongsi,
      //      money: this.list1.money,
      //   },
      // })
      // .then((res)=>{
      //     console.log(res);
      // })
      // .catch((error) => {
      //   console.log(error);
      // })
    },
  },
  mounted() {
    console.log(11111);
    this.axios({
      method: "post",
      url: "http://localhost:3000/get_yaopin",
      data: {
        id: this.$route.params.id,
      },
    })
      .then((res) => {
        this.list1 = res.data.data[0];
        console.log(this.list1);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style scoped>
.head {
  width: 99%;
  height: 35px;
  top: 2px;
  position: fixed;
  z-index: 3;
}
.head_1 {
  position: absolute;
  width: 9%;
  height: 35px;
  left: 10px;
  color: white;
  line-height: 35px;
  text-align: center;
  font-size: 30px;
  border-radius: 99px;
  background-color: rgb(182, 177, 177);
}
.head_2 {
  line-height: 35px;
  position: absolute;
  width: 9%;
  height: 35px;
  right: 10px;
  color: white;
  text-align: center;
  font-size: 30px;
  border-radius: 99px;
  background-color: rgb(182, 177, 177);
}
/* .head1 {
  height: 35px;
} */
.shangpin_img {
  height: 280px;
}
.jiage {
  margin-top: 10px;
  height: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.jiage1 {
  height: 40%;
  color: red;
  font-size: 25px;
  line-height: 40px;
}
.jiage2 {
  height: 30%;
  font-size: 20px;
  line-height: 30px;
  font-weight: bold;
}
.jiage3 {
  height: 25%;
  line-height: 25px;
  text-align: center;
}
.shuoming {
  margin-top: 20px;
  height: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  line-height: 30px;
  color: red;
  text-align: center;
  position: relative;
}
.shuoming1 {
  width: 93%;
  margin-left: 10px;
}
.pingjia {
  height: 200px;
  border: 1px solid black;
}
.shangpinjieshao {
  width: 94%;
  margin-top: 10px;
  height: 3900px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-left: 10px;
}
.shangpinjieshao1 {
  width: 100%;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  font-weight: bold;
}
.dibianlan {
  width: 99%;
  height: 50px;
  position: fixed;
  bottom: 0px;
  z-index: 3;
  display: flex;
}

.dibianlan1,
.dibianlan2 {
  flex: 1.5;
  background-color: white;
}
.dibianlan3,
.dibianlan4 {
  flex: 3;
}
.dibianlan3 {
  color: white;
  font-size: 20px;
  background-color: orange;
  text-align: center;
  line-height: 50px;
}
.dibianlan4 {
  color: white;
  font-size: 20px;
  background-color: red;
  text-align: center;
  line-height: 50px;
}
.el-icon-loading {
  font-size: 60px;
}
</style>